<!-- 
  * Copyright (c) 2022 iSoftStone Information Technology (Group) Co.,Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
  *     http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
<template>
	<view class="surveyBox">
		<view class="gitee">
			<view class="content">
				<view class="title"><text class="red">*</text>1：您对哪些联合国可持续发展目标（SDG）感兴趣？</view>
				<view class="intro">您可以在赛事说明的资源页面上了解有关可持续发展目标的更多信息</view>
			</view>
			<u-form :model="form" :rules="rules" ref="form" labelPosition="top" labelWidth="100%" :borderBottom="false">
				<u-form-item prop="admissionTime" :borderBottom="false" @click="show = true">
					<u-input v-model="form.admissionTime" disabled disabledColor="#ffffff" placeholder="--请选择--"
						suffixIcon="arrow-down" suffixIconStyle="color: #909399"></u-input>
					<u-picker :show="show" title="选择目标" :columns="columns" :defaultIndex="[2]" confirmColor="#0A59F7" @confirm="submitBtn()" @cancel="closeBtn()"
						@change="changeHandler()">
					</u-picker>
				</u-form-item>
			</u-form>
		</view>
		<view class="explain">
			<view class="content">
				<view class="title">2：请描述对该目标感兴趣的原因：</view>
			</view>
			<u-textarea v-model="value2" height="180" count maxlength="200" placeholder=" ">
			</u-textarea>
		</view>
		<view class="bottom">
			<view class="btn">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					admissionTime: "",
				},
				rules: {
					admissionTime: {
						type: 'string',
						required: true,
						message: '--请选择--',
						trigger: ['change']
					},
				},
				columns: [
					['1.消除贫困', '2.零饥饿', '3.良好健康与福祉', '4.优质交运', "5.两性平等与赋予妇女权利", "其他"]
				],
				show: false,
				value2: '',
			}
		},
		onLoad:function(res){
			console.log(res)
		},
		methods: {
			submitBtn(val) {
				console.log(val,33)
				this.form.admissionTime = val.value.toString()
				this.show = false
			},
			closeBtn() {
				this.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.surveyBox {
		.gitee {
			margin-top: 16rpx;
			background: #FFFFFF;
			padding: 28rpx 24rpx 24rpx 24rpx;

			.content {
				.red {
					color: #D94838;
				}

				.title {
					font-size: 32rpx;
					color: #000000;
					font-weight: bold;
					margin-bottom: 16rpx;
				}

				.intro {
					font-size: 24rpx;
					color: #999999;
					margin-bottom: 24rpx;
				}
			}

			.copy {
				font-size: 30rpx;
				color: #317AF7;
				text-align: center;
				line-height: 42rpx;
				font-weight: 400;
				margin-top: 36rpx;
			}

			/deep/ .u-input__content__field-wrapper {
				font-size: 28rpx;
				border-radius: 8rpx !important;
			}
		}

		.explain {
			margin-top: 16rpx;
			background: #FFFFFF;
			padding: 28rpx 24rpx 40rpx 24rpx;

			.content {
				.title {
					font-size: 32rpx;
					color: #000000;
					font-weight: bold;
					margin-bottom: 26rpx;
				}
			}

			.copy {
				font-size: 30rpx;
				color: #317AF7;
				text-align: center;
				line-height: 42rpx;
				font-weight: 400;
				margin-top: 36rpx;
			}

			/deep/.u-textarea__field {
				font-size: 28rpx;
				border-radius: 8rpx !important;
			}
		}

		.bottom {
			width: 100%;
			height: 128rpx;
			line-height: 128rpx;
			// background: #ffffff;
			// padding: 0 24rpx;
			position: fixed;
			bottom: 0;

			.btn {
				margin: 16rpx 24rpx 16rpx 24rpx;
				height: 96rpx;
				line-height: 96rpx;
				background: #4587F7;
				border-radius: 48rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				font-weight: bold;
			}
		}
	}
</style>
